<template>
	<view class="flex-col page">

		<image
			src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826957018619333.png"
			class="image_1" />
		<view class="flex-col group">
			<view class="flex-col section_2">
				<view class="flex-row">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
						class="image_2" />
					<text class="text_1">验收服务</text>
				</view>
				<text class="text_2">
					为业主提供专业细致的单项验收服务（一次性）按类选择分：毛坯房验收、水电验收、硬装验收（中期验收）、全屋精装（竣工）验收。
				</text>
			</view>
			<view class="flex-col section_3">
				<view class="justify-between section_4">
					<text class="text_3">我的房屋信息</text>
					<image @click="go('/pages/index/editHourse?id='+family.projectId)"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826925530282387.png"
						class="image_4" />
				</view>
				<view class="justify-between group_2 view">
					<text class="text_4">房屋位置</text>
					<text class="text_6">{{family.cityName}}{{family.districtName}}</text>
				</view>
				<view class="justify-between group_3">
					<text class="text_8">详细地址</text>
					<text class="text_9">{{family.position}}</text>
				</view>
				<view class="justify-between group_3">
					<text class="text_4 ">房屋面积</text>
					<text class="text_6">{{family.roomArea}}m²</text>
				</view>
				<view class="justify-between group_3">
					<text class="text_12">房屋类型</text>
					<text class="text_13">{{family.roomTypeName}}</text>
				</view>
			</view>
			<view class="flex-col section_5">
				<view class="flex-col">
					<view class="flex-row group_6">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
							class="image_2" />
						<text class="text_14">选择验收类型</text>
					</view>
					<view class="flex-col list">

						<view class="u-flex u-row-between list-item" :key="i" v-for="(item, i) in checktype"
							@click="setRadioIndex(item.acceptanceServiceTypeId)">
							<view class="u-flex-col">
								<view class="flex-row">
									<text class="text_15">{{item.acceptanceServiceTypeName}}</text>
									<image @click.stop="tips(i,item.acceptanceServiceTypeName,item.remark)"
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826926394646541.png"
										class="image_6" />
									<u-modal @confirm="tipShow = false" :show="tipShow" :title="tipTitle"
										:content='tipContent'></u-modal>
								</view>
								<text class="text_17">{{item.money}}/m²</text>
							</view>

							<image
								:src="$IMG_URL+(radioIndexId!=item.acceptanceServiceTypeId?'/icons/radio.png':'/icons/radiocheck.png')"
								class="image_66" />

						</view>
					</view>
					<text class="text_26">预约上门验收时间</text>
					<text class="text_27">注：具体上门时间带客户服与您确认。</text>
				</view>
				<view class="justify-between group_15" @click="setDate">
					<text class="text_28">选择日期</text>
					<view class="flex-row group_16">
						<text class="text_29">{{$u.timeFormat(beginDate, 'yyyy年mm月dd日')}}</text>
						<image :src="imgUrl+'16557868075783727961.png'" class="image_15 " />
					</view>
				</view>
				<view class="flex-col group_17">
					<view class="justify-between group_18" @click="setTimeRange">
						<text class="text_30">选择时间段</text>
						<view class="flex-row group_19">
							<text class="text_29">{{timeRangeText}}</text>
							<image :src="imgUrl+'16557868075783727961.png'" class="image_15" />
						</view>
					</view>
					<view class="justify-between group_20" v-if="coupon.length>0" @click="couponShow=true">
						<text class="text_32">选择优惠券</text>
						<view class="flex-row group_21">
							<text class="text_33">{{couponAmount>0?'-¥'+couponAmount:'请选择'}}</text>
							<!-- <text class="text_33">暂无</text> -->
							<image :src="imgUrl+'16557868075783727961.png'" class="image_15" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="justify-between section_6">
			<view class="group_22">
				<text class="text_34">￥</text>
				<text class="text_35">{{money}}</text>
			</view>
			<view class="flex-row">
				<view class="flex-col items-center group_24" @click="go('/pages/my/message/kefu')">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826925516947131.png"
						class="image_19" />
					<text class="text_36">在线咨询</text>
				</view>
				<view class="flex-col items-center text-wrapper"><text class="text_37" @click="submit">确认</text></view>
			</view>
		</view>
		<u-datetime-picker @confirm="confirm"  @cancel="show=false" itemHeight="60" :show="show" :minDate="beginDate" v-model="beginDate"
			mode="date"></u-datetime-picker>
		<!-- 	<u-datetime-picker @confirm="confirm" @cancel="show=false" itemHeight="60" :show="show" :minDate="beginDate" v-model="beginDate"
				mode="time"></u-datetime-picker> -->
		<shop-modal :show="showModal" :title="title" @close="showModal=false">
			<template #default>
				<view>{{content}}</view>
			</template>
			<template #button>
				<view class="">

				</view>
			</template>
		</shop-modal>
		<shop-timerange-picker v-if="timeShow" :rangeTime="bussnissTime" :time="timeRange" @confrim="timeConfrim" @cancel="timeCancel" @timeupdate="update">
		</shop-timerange-picker>
		<shop-coupon v-if="couponShow" :amount="money" :list="coupon" @confirm="couponConfirm"
			@close="couponShow=false"></shop-coupon>
   

	</view>
</template>

<script>
	
	export default {
		components: {},
		async onShow() {
			this.$store.dispatch('checkHouse');
			//查询是否有我的家 返回参数0无 1有  页面 1展示0不展示
			await this.businessHours();
			await this.getFamily();
			await this.getCoupon();
			await this.getcontent()
          
		},
		data() {
			return {
				tipShow: false,
				tipTitle: '',
				tipContent: '',
                bussnissTime:['7', '0', '0', '19', '0'],
				list: [],
				family: {},
				checktype: [],
				imgUrl: this.$IMG_URL,
				show: false,
				beginDate: Number(new Date()),
				timeRange: ['15', '0', '0', '18', '0'],
				title: '',
				content: '',
				showModal: false,
				timeShow: false,
				timeRangeText: '09:00-12:00',
				radioIndexId: '',
				money: 0,
				coupon_id: 0,
				coupon: [],
				couponAmount: 0,
				couponShow: false,
				content: {}
			};
		},
        
		methods: {
			businessHours()
			{
			  this.$http('check.businessHours').then(r=>{
				  if(r.code==200 )
				  {
					 let startTime= r.data.startTime.split(":");
					  let endTime= r.data.endTime.split(":");
					  console.log(startTime);
					  console.log(endTime);
					  this.bussnissTime=[startTime[0],startTime[1],0,endTime[0],endTime[1]];
					    this.handleDate();
					 
				  }
			  });
			},
			getcontent() {
				this.$http('consult.queryServiceDetails', {
					type: 6
				}).then(r => {
					if (r.code == 200) {
						this.content = r.data;
					}
				});
			},
			handleDate()
			{
				let date=new Date();
				let hours=date.getHours();
				let minutes=date.getMinutes();
				let beginDate=date.getTime();
				console.log(2222);
				console.log(this.bussnissTime)
			if(hours<19)
			{   
			this.beginDate=beginDate
			let begintDate2=beginDate+30*60*1000;
			let date=new Date(begintDate2);
			let hours2=date.getHours();
			let minutes2=date.getMinutes();
	        console.log(minutes);
			console.log(this.bussnissTime[4]);
			if(minutes>this.bussnissTime[4])
			{
				minutes=this.bussnissTime[4];
			}
			let minut=(minutes2>9?minutes2:'0'+minutes2);
			this.timeRangeText=((hours2>9)?hours2:'0'+hours2)+":"+minut+'-'+(hours+4)+':'+minutes;
			
			this.timeRange=[hours2,minut,'0',(hours+4),minutes];
			console.log(this.timeRange);
				}else{
					this.beginDate=beginDate+24*3600*1000;
					this.timeRangeText="08:00"+'-'+'12:00';
					this.timeRange=[8,'0','0',12,'0'];
				}
			},
			setDate() {
				this.show = true;
			},
			setRadioIndex(id) {
				if (this.radioIndexId != id) {
					this.coupon_id = 0;
					this.couponAmount = 0;
					this.getMoney(id, this.family.roomArea, this.coupon_id);
				}
				this.radioIndexId = id;
			},
			couponConfirm(coupon) {

				let {
					coupon_id,
					amount
				} = coupon;
				// console.log(coupon_id);
				// console.log(amount);
				this.coupon_id = coupon_id;
				this.couponAmount = amount;
				this.couponShow = false;
				this.getMoney(this.radioIndexId, this.family.roomArea, this.coupon_id)
			},
			getFamily() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {
						this.family = r.data.project;
						this.getchecktype(r.data.project.district, r.data.project.roomArea)
					}
				});
			},
			// tips(title, content) {

			// 	this.showModal = true;
			// 	this.title = title;
			// 	this.content = content;
			// },
			tips(index, name, content) {
				if (index == 0) {
					this.tipTitle = name
					this.tipContent = content || '水电'
				} else if (index == 1) {
					this.tipTitle = name
					this.tipContent = content || '精装房'
				} else if (index == 2) {
					this.tipTitle = name
					this.tipContent = content || '毛坯房'
				} else if (index == 3) {
					this.tipTitle = name
					this.tipContent = content || '中期'
				}
				this.tipShow = true
			},
			getchecktype(areaid, roomArea) {
				this.$http('check.checktype', {
					areaId: areaid
				}).then(r => {
					// console.log(r);
					if (r.code == 200) {
						this.checktype = r.data;
						if (r.data.length > 0) {
							this.radioIndexId = r.data[0].acceptanceServiceTypeId;
							this.getMoney(r.data[0].acceptanceServiceTypeId, roomArea, this.coupon_id);
						}

					}
				});
			},
			confirm(e) {
				this.beginDate = e.value;
				this.show = false;
			},
			timeConfrim(e) {
				console.log(e);
				this.timeShow = false;
				this.timeRangeText = e.time;
			},
			timeCancel(e) {
				this.timeShow = false;
				// this.timeRangeText = e.time;

			},
			setTimeRange() {
				this.timeShow = true;
			},
			getMoney(typeid, area, coupon_id) {
				this.$http('check.getMoney', {
					id: typeid,
					couponsId: coupon_id,
					citySize: area
				}).then(r => {
					if (r.code == 200) {
						this.money = r.data;
					}
				});
			},
			getCoupon() {

				this.$http('coupon.coupon').then(r => {

					if (r.code == 200) {
						if (r.data) {
							this.coupon = r.data;
						}

					}
				});
			},
			submit() {
				if (!this.radioIndexId) {
					this.$u.toast('请选择验收类型');
					return
				}
				if (!this.beginDate) {
					this.$u.toast('请选择日期');
					return
				}
				if (!this.timeRangeText) {
					this.$u.toast('请选择时间段');
					return
				}
				if (!this.money) {
					this.$u.toast('总金额异常');
					return
				}
				if (!this.family.projectId) {
					this.$u.toast('总金额异常');
					return
				}
				this.$http('check.submit', {
					acceptanceServiceTypeId: this.radioIndexId,
					id: this.coupon_id,
					isData: this.$u.timeFormat(this.beginDate, 'yyyy-mm-dd'),
					isDis: this.coupon_id ? 1 : 0,
					isTime: this.timeRangeText,
					monry: this.money,
					projectId: this.family.projectId

				}).then(r => {
					// console.log(r);
					if (r.code == 200) {
						this.go('/pages/pay/pay?orderid=' + r.data);
					} else {
						this.$u.toast(r.msg);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.image_66 {
		width: 36rpx;
		height: 36rpx;
	}

	.group_2 {
		padding-left: 24rpx;
		padding-right: 22rpx;
	}

	.image_2 {
		margin-top: 8rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.image_15 {
		margin: 3rpx 0 4rpx 22rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}

	.text_17 {
		margin-top: 26rpx;
		align-self: flex-start;
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_15 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_6 {
		margin-left: 15rpx;
		margin-top: 3rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.text_4 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 500;
	}

	.text_6 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 53rpx 31.5rpx 32rpx;
		background-color: #ffffff;
		position: relative;
	}

	.image_1 {
		flex-shrink: 0;
		width: 100vw;
		height: 46.6667vw;
	}

	.group {
		margin-top: -83rpx;

		padding: 0 24rpx 120rpx 24rpx;


		padding: 0 24rpx 120rpx 24rpx;


		position: relative;
	}

	.section_6 {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin-top: 32rpx;
		padding: 16rpx 23rpx 15rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #00000014;
	}

	.image {
		position: absolute;
		left: 31.5rpx;
		bottom: 26.5rpx;
		width: 21rpx;
		height: 36rpx;
	}

	.text {
		color: #000000;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.section_2 {

		padding: 29rpx 24rpx 68rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_3 {
		margin-top: 20rpx;
		padding-bottom: 41rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_5 {
		margin-top: 20rpx;
		padding: 29rpx 24rpx 35rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_22 {
		align-self: center;
		height: 38rpx;
	}

	.text_2 {
		margin-top: 34rpx;
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 42rpx;
		text-align: left;
	}

	.section_4 {
		padding: 29rpx 24rpx 31rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.view {
		margin-top: 30rpx;
	}

	.group_3 {
		padding: 39rpx 23rpx 0 24rpx;
	}

	.view_1 {
		margin-top: 46rpx;
	}

	.group_4 {
		margin-top: 33rpx;
		padding-left: 24rpx;
		padding-right: 23rpx;
	}

	.group_15 {
		margin-top: 46rpx;
	}

	.group_17 {
		margin-top: 41rpx;
	}

	.text_34 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_35 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_24 {
		margin-bottom: 5rpx;
	}

	.text-wrapper {
		margin-left: 56rpx;
		// padding: 14rpx 0 25rpx;
		background-color: #1d6aff;
		border-radius: 36rpx;
		width: 220rpx;
		height: 72rpx;
	}

	.text_1 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		margin-bottom: 4rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 800;
	}

	.image_4 {
		margin-top: 10rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_9 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		text-align: right;
		width: 369rpx;
	}

	.text_10 {
		margin-bottom: 6rpx;
	}

	.text_12 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_13 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_6 {
		display: flex;
		align-items: center;
		height: 100%;
		padding-bottom: 34rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.list {
		padding: 30rpx 0 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_26 {
		margin-top: 30rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_27 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_28 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_16 {
		margin-top: 6rpx;
	}

	.group_18 {
		padding-bottom: 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_20 {
		padding-top: 30rpx;
	}

	.image_19 {
		width: 44rpx;
		height: 42rpx;
	}

	.text_36 {

		margin-top: 6rpx;


		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_37 {
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_14 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.list-item:not(:first-of-type) {
		margin-top: 41rpx;
	}

	.text_29 {
		color: #C4C4C4;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_16 {
		margin: 3rpx 0 4rpx 38rpx;
	}

	.text_30 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_19 {
		margin-top: 6rpx;
	}

	.text_32 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_21 {
		margin-top: 6rpx;
	}

	.text_31 {
		color: #bfbfbf;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_33 {
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}
</style>
